<#setting classic_compatible=true>
<#assign base=request.contextPath />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/messagePandect/messagePandect.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/overview/overView.css"> 
    <title>统一消息中心</title>
    <!-- 引入通用css -->
	<#include "/common/commoncss.ftl">
	<style>
		.s-sta{height: 79.5%;}
	</style>
  </head>

  <body >
<!-- 标题栏区域 -->
<div class="titleColumn">
	<span class="fa fa-bar-chart-o"></span><span id="messagePan" style="margin-left: 20px;" >消息总览</span>
</div>

<!-- 四个统计模块区域 -->
<div class="f-sta">
	<div class="texiao">
		<div class="title_table" id="app_area">
			<div class="main-span">
				<span class="iconfont  icon-jiedianlianjie"/></span>
			</div>
			<div class="main-word">
				<h5 id="p1"><span>今日接入应用数:</span><b class="bzi"><span class="get-num" id="todayApp"></span><span class="main-word-add">个</span></b></h5>
				<h5 id="p2"><span>总接入应用数:</span><b class="bzi"><span class="get-num" id="allApp"></span><span class="main-word-add">个</span></b></h5>
			</div>
		</div>
	</div>
	
	<div class="texiao texiao_left">
		<div class="title_table  title_left" id="queue_area">
			<div class="main-span">
				<span class="iconfont  icon-zhuti"/></span>
			</div>
			<div class="main-word">
				<h5 id="p3"><span>今日新增主题:</span><b class="bzi"><span class="get-num" id="todayTopic"></span><span class="main-word-add">个</span></b></h5>
				<h5 id="p4"><span>总主题队列:</span><b class="bzi"><span class="get-num" id="allTopic"></span><span class="main-word-add">个</span></b></h5>
			</div>
		</div>
	</div>
	
	<div class="texiao texiao_left">
		<div class="title_table  title_left" id="flow_area">
			<div class="main-span">
				<span class="iconfont  icon-liuliang"/></span>
			</div>
			<div class="main-word">
				<h5 id="p5"><span>今日消息流量:</span><b class="bzi"><span class="get-num" id="todayMessage"></span><span class="main-word-add">条</span></b></h5>
				<h5 id="p6"><span>总消息流量:</span><b class="bzi"><span class="get-num" id="allMessage"></span><span class="main-word-add">条</span></b></h5>
			</div>
		</div>
	</div>
	
	<div class="texiao texiao_left">
		<div class="title_table  title_left" id="delay_area">
			<div class="main-span">
				<span class="iconfont  icon-hekriconyuyue"/></span>
			</div>
			<div class="main-word">
				<h5 id="p7"><span>总消息发送平均延迟:</span><br/><b class="bzi"><span class="get-num" id="avgDelay"></span><span class="main-word-add">ms</span></b></h5>
			</div>
		</div>
	</div>
</div>

<!-- 四个图表区域 -->
<div class="s-sta">
	<!-- 第一行两个图表 -->
	<div class="fir-table">
		<div class="fir-table-li" id="fir-table-li-fir" ></div>
		<div class="fir-table-li" id="fir-table-li-sec"></div>
	</div>
	<!-- 第二行两个图表 -->
	<div class="sec-table">
		<div class="sec-table-li"  id="sec-table-li-fir"></div>
		<div class="sec-table-li"  id="sec-table-li-sec"></div>
	</div>
	<!-- 第三行一个图表 -->
	<div class="thi-table">
		<div class="thi-table-li"  id="sec-table-li-fir"></div>
	</div>
</div>
			<!-- 引入通用和js -->
		<#include "/common/commonjs.ftl">
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/echarts.js"></script> 
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/overview/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/overview/count.js"></script>
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/overview/xs.js"></script>
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/messagePandect/messagePandect.js"></script>
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/login/jquery.cookie.js"></script> 
		<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/login/jquery.session.js"></script> 
	
		<script type="text/javascript">
		/* $(".title_table").xs999(1);   */                             //四个小区域添加浮动色彩事件
		$(".get-num").hover(function(){
			$(".get-num").css("font-size","16px;");
		});
		//定时刷新主页的四个小区域实时数据
		$(document).ready(function(){
				setInterval("getPageData()",5000);
			});   
		//定时刷新四个图表
		$(document).ready(function(){
				setInterval("getFourTableData()",150000);
			});  
		
		//获取登录用户信息
		$("document").ready(function(){
			var username=$.session.get('username');
			var right=$.session.get('right');
		});
		</script> 
  </body>
</html>
